<template>
  <Card>
    <div class="txt">聚云潭●临沂市首届第一书记、好青年扶贫带货节</div>
    <Row style="margin-top: 15px">
      <Col span="12">
<!--        <div class="title-txt">Top 20 实时在线交易额(万)</div>-->
<!--        <Button type="info" @click="setTime">查询</Button>-->
        <div ref="transaction" :style="'height:'+(height-130)+'px'"></div>
      </Col>
      <Col span="12">
<!--        <div class="title-txt">Top 20 实时在线交易数量</div>-->
        <div ref="amount" :style="'height:'+(height-130)+'px'"></div>
      </Col>
    </Row>
    <div class="title-txt">Copyright©临沂科技职业学院</div>
  </Card>
</template>

<script>
  import echarts from 'echarts'
  import tdTheme from '@/components/charts/theme.json'
  echarts.registerTheme('tdTheme', tdTheme)
  import { post } from '@/libs/axios-cfg'
  import { formatDate } from '@/libs/util'
  import baseData from "./data";
  export default {
      name: "show",
      data() {
          return {
            height: 600,
            transactionDom: null,
            amountDom: null,
            option: baseData.option,
            option2: baseData.option2,
            transactionData: [],
            transactionLen: '',
            transactionDict: {},
            amountData: [],
            amountLen: '',
            amountDict: {}
          } // end return
      }, //end data
      methods: {
        // 每隔10分钟调用一次
         async getData() {
           try {
             let res = await post('/dashboard/list', {});
             if (this.transactionData.length > 0) {
               this.transactionData.forEach(item => {
                 this.transactionDict[item['account']] = JSON.parse(JSON.stringify(item));
               });
             }
             if (this.amountData.length > 0) {
               this.amountData.forEach(item => {
                 this.amountDict[item['account']] = JSON.parse(JSON.stringify(item));
               });
             }
             this.transactionData  = res.data[0];
             this.transactionLen = res.data[0].length;
             this.amountData  = res.data[1];
             this.amountLen = res.data[1].length;
           } catch (error) {
             this.$throw(error)
           }
         },
        // 每隔0.5秒调用一次
        setRandom() {
           this.setTransaction();
           this.setAmount();
        },
        setTransaction() {
          let step = 0;
          let oldVal = 0;
          var eleList = [['score', 'transaction', 'product']];
          var tempList = [];
          for (let item of this.transactionData) {
            var ele = [];
            // console.log('ele = ', item);
            if (Object.keys(this.transactionDict).length === 0 ||
              !this.transactionDict[item['account']]){
              oldVal = 0;
              this.transactionDict[item['account']] = JSON.parse(JSON.stringify(item));
            } else {
              oldVal = this.transactionDict[item['account']]['transaction'];
            }
            step = (item['transaction'] - oldVal) / 600;
            if (step < 0.005) {
              ele[1] = item['transaction'];
              ele[0] = item['colour'];
              ele[2] = item['account'];
            } else {
              console.log('newVal, oldVal, step = ', item['transaction'], oldVal, step);
              ele[1] = parseFloat((oldVal + step).toFixed(3));
              this.transactionDict[item['account']]['transaction'] = ele[1];
              ele[0] = step ? this.getRandom(1, 100, 0) : item['colour'];
              ele[2] = item['account'];
            }
            tempList.push(ele);
          }
          tempList.sort((x,y) => {return x[1] - y[1];});
          var resList = eleList.concat(tempList);
          this.option.dataset.source = resList;
          this.transactionDom.setOption(this.option);
        },
        // 每隔0.5秒调用一次
        setAmount() {
          let step = 0;
          let oldVal = 0;
          var eleList = [['score', 'amount', 'product']];
          var tempList = [];
          for (let item of this.amountData) {
            var ele = [];
            if (Object.keys(this.amountDict).length === 0 ||
              !this.amountDict[item['account']]){
              oldVal = 0;
              this.amountDict[item['account']] = JSON.parse(JSON.stringify(item));
            } else {
              oldVal = this.amountDict[item['account']]['amount'];
            }
            step = (item['amount'] - oldVal) / 600;
            if (step < 0.005) {
              ele[1] = item['amount'];
              ele[0] = item['colour'];
              ele[2] = item['account'];
            } else {
              // console.log('newVal, oldVal, step = ', item['amount'], oldVal, step);
              ele[1] = parseFloat((oldVal + step).toFixed(3));
              this.amountDict[item['account']]['amount'] = ele[1];
              ele[0] = step ? this.getRandom(1, 100, 0) : item['colour'];
              ele[2] = item['account'];
            }
            tempList.push(ele);
          }
          tempList.sort((x,y) => {return x[1] - y[1];});
          var resList = eleList.concat(tempList);
          this.option2.dataset.source = resList;
          this.amountDom.setOption(this.option2);
        },
        getRandom(start, end, fixed=0) {
          let differ = end - start;
          let random = Math.random();
          return (start + differ * random).toFixed(fixed)
        },
        setTime() {
          // this.getData();
          setInterval(this.setRandom, 500);
          setInterval(this.getData, 300000); // 每隔5分钟调用一次
          // setInterval(this.getData, 60000); // 每隔5分钟调用一次
        }
      },
      mounted() {
        this.getData();
        this.setTime();
        // 基于准备好的dom，初始化echarts实例
        this.transactionDom = echarts.init(this.$refs.transaction);
        this.amountDom = echarts.init(this.$refs.amount);
        this.transactionDom.setOption(this.option);
        this.amountDom.setOption(this.option2);
      },
      created() {
        this.height = document.body.clientHeight;
      }
  }
</script>

<style scoped>
  .txt{
    text-align: center;
    font-size: 45px;
    font-weight: bold;
    color: #ed1d15;
  }
.title-txt{
  text-align: center;
  /*font-size: x-large;*/
  /*font-weight: bold;*/
  /*color: #348EED;*/
}
</style>
